<!doctype html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../assert_selection.js"></script>
<script>
const isMac = navigator.platform.indexOf('Mac') === 0;

test(() => assert_selection(
    [
        '<div contenteditable>',
            '|foo <img src="../../resources/abe.png"> bar',
        '</div>',
    ].join(''),
    selection => selection.modify('move', 'forward', 'sentence'),
    [
        '<div contenteditable>',
            'foo <img src="../../resources/abe.png"> bar|',
        '</div>',
    ].join('')),
    'Move forward sentence');

test(() => assert_selection(
    [
        '<div contenteditable>',
            'foo <img src="../../resources/abe.png"> bar|',
        '</div>',
    ].join(''),
    selection => selection.modify('move', 'backward', 'sentence'),
    [
        '<div contenteditable>',
            '|foo <img src="../../resources/abe.png"> bar',
        '</div>',
    ].join('')),
    'Move backward sentence');

test(() => assert_selection(
    [
        '<div contenteditable>',
            '|foo<img src="../../resources/abe.png">bar baz',
        '</div>',
    ].join(''),
    selection => selection.modify('move', 'forward', 'word'),
    [
        '<div contenteditable>',
            'foo|<img src="../../resources/abe.png">bar baz',
        '</div>',
    ].join('')),
    'Move forward word 1');

test(() => assert_selection(
    [
        '<div contenteditable>',
            'foo|<img src="../../resources/abe.png">bar baz',
        '</div>',
    ].join(''),
    selection => selection.modify('move', 'forward', 'word'),
    [
        '<div contenteditable>',
            isMac
                ? 'foo<img src="../../resources/abe.png">|bar baz'
                : 'foo<img src="../../resources/abe.png">|bar baz',
        '</div>',
    ].join('')),
    'Move forward word 2');

test(() => assert_selection(
    [
        '<div contenteditable>',
            'foo<img src="../../resources/abe.png">|bar baz',
        '</div>',
    ].join(''),
    selection => selection.modify('move', 'forward', 'word'),
    [
        '<div contenteditable>',
            isMac
                ? 'foo<img src="../../resources/abe.png">bar| baz'
                : 'foo<img src="../../resources/abe.png">bar |baz',
        '</div>',
    ].join('')),
    'Move forward word 3');

test(() => assert_selection(
    [
        '<div contenteditable>',
            'foo bar<img src="../../resources/abe.png">baz|',
        '</div>',
    ].join(''),
    selection => selection.modify('move', 'backward', 'word'),
    [
        '<div contenteditable>',
            'foo bar<img src="../../resources/abe.png">|baz',
        '</div>',
    ].join('')),
    'Move backward word 1');

test(() => assert_selection(
    [
        '<div contenteditable>',
            'foo bar<img src="../../resources/abe.png">|baz',
        '</div>',
    ].join(''),
    selection => selection.modify('move', 'backward', 'word'),
    [
        '<div contenteditable>',
            'foo bar|<img src="../../resources/abe.png">baz',
        '</div>',
    ].join('')),
    'Move backward word 2');

test(() => assert_selection(
    [
        '<div contenteditable>',
            'foo bar|<img src="../../resources/abe.png">baz',
        '</div>',
    ].join(''),
    selection => selection.modify('move', 'backward', 'word'),
    [
        '<div contenteditable>',
            'foo |bar<img src="../../resources/abe.png">baz',
        '</div>',
    ].join('')),
    'Move backward word 3');
</script>
